<template>
  <div class="home">
    <header>图书商城</header>
    <p @click="jump">{{$route.query.md}}</p>
    <van-grid :column-num="2" :gutter="10">
      <van-grid-item v-for="(item, index) in list" :key="index">
        <van-image :src="item.img" />
        <span>{{ item.desc }}</span>
        <div class="foot">
          <span>{{ item.name }}</span
          ><van-icon name="add-o" />
        </div>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: "Home",
  data() {
    return {
      list: [],
    };
  },
  created() {
    let val = this.$route.query.md;
    // console.log(val);
    this.$axios.get("data.json").then((res) => {
      this.list = res.data.filter(item => item.name.includes(val));
    });
  },
  methods: {
      jump(){
          this.$router.go(-1)
      }
  },
};
</script>
<style lang="scss">
header {
  height: 45px;
  display: flex;
  align-items: center;
  background: #7277e0;
  color: #fff;
  justify-content: center;
}
p {
  padding: 6px;
  background: #ccc;
  text-align: center;
}
.van-grid-item {
  // box-shadow: 5px 5px #ccc;
  span {
    display: inline-block;
    font-size: 12px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .foot{
    display: flex;
    height: 30px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    color: #7179d9;
    font-size: 16px;
  }
}
</style>
